<template>
    <div class="shop">
        
      <el-row>
          <el-col :span="12" :offset="18">
              <el-button type="primary" icon="plus" @click="onAddGood">添加商品</el-button>
          </el-col>
      </el-row>
      <div class="divline"></div>
      
      <!-- 列表 -->
        <el-table :data="tableData" border style="width: 99%" align='center'>
             <el-table-column 
                :prop="name.info.prop" 
                :label="name.info.label"
                :align="name.style.align"
                :width="name.style.width"
                :sortable="name.info.sortable">
            </el-table-column>
            
            <!--类型，特殊处理-->
            <el-table-column 
                :prop="type.info.prop" 
                :label="type.info.label"
                :align="type.style.align"
                :width="type.style.width"
                :formatter="formatterType"
                :sortable="type.info.sortable">
            </el-table-column>

            <el-table-column 
                :prop="url.info.prop" 
                :label="url.info.label"
                :align="url.style.align"
                :width="url.style.width"
                :sortable="url.info.sortable">
            </el-table-column>

            <el-table-column 
                :prop="status.info.prop" 
                :label="status.info.label"
                :align="status.style.align"
                :width="status.style.width"
                :formatter="formatterStatus"
                :sortable="status.info.sortable">
            </el-table-column> 
            <el-table-column 
                :prop="intergral.info.prop" 
                :label="intergral.info.label"
                :align="intergral.style.align"
                :width="intergral.style.width"
                :sortable="intergral.info.sortable">
            </el-table-column>
            <el-table-column 
                :prop="number.info.prop" 
                :label="number.info.label"
                :align="number.style.align"
                :width="number.style.width"
                :sortable="number.info.sortable">
            </el-table-column>

            <el-table-column label="操作" v-if="checkLevel()">
                <template scope='scope'>
                    <el-checkbox style="margin-left:10px" v-model="scope.row.checked" @change='onCheckedChange((scope.row))'>启用</el-checkbox>
                
                    <el-tooltip content="编辑题目" placement="left">
                        <el-button type="info"   icon='edit'   size="mini" @click='onUpdateGood(scope.row,scope.$index)'></el-button>
                    </el-tooltip>
                    <el-tooltip content="删除试题" placement="right">
                         <el-button type="danger" icon='delete' size="mini" @click='onDeleteGood(scope.row,scope.$index)'></el-button>
                    </el-tooltip>
                </template>
                </el-table-column>            
        </el-table>


        <!-- 添加 -->
        <el-dialog :title="goodForm.title" v-model="addFormVisible">
            <el-form :model="goodForm" ref="goodForm" style="width: 80%" label-width="30%">
                <el-form-item prop="name" label="商品名称" :rules="[{required: true}]">
                    <el-input placeholder="请输入商品名称" v-model="goodForm.name" type="textarea" :rows="1"></el-input>
                </el-form-item>
                <el-form-item prop="type" label="商品类型">
                    <el-select v-model="goodForm.type"  placeholder="请选择商品类型">
                        <el-option v-for="item in goodTypes()" 
                            :key="item.value"
                            :label="item.label" 
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="url" label="展示url" :rules="[{required: false}]">
                    <el-input placeholder="请输入商品展示url" v-model="goodForm.url"></el-input>
                </el-form-item>
                <el-form-item prop="intergral" label="所需积分" :rules="[{required: true}]">
                    <el-input placeholder="请输入所需积分" v-model="goodForm.intergral"></el-input>
                </el-form-item>
                <el-form-item prop="number" label="商品数量" :rules="[{required: true}]">
                    <el-input placeholder="请输入商品数量" v-model="goodForm.number"></el-input>
                </el-form-item>
                <el-form-item prop="remark" label="备注" :rules="[{required: false}]">
                    <el-input placeholder="请输入备注" v-model="goodForm.remark" type="textarea" :rows="1"></el-input>
                </el-form-item>
                
                <el-form-item>
                    <el-button type="primary" @click="submitForm('goodForm')">提交</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    import ShopJs from './Shop.js';
    module.exports = ShopJs;
</script>
<style scoped>
  .divline {
    margin-top: 10px;
    margin-bottom: 20px;
    height:1px;
    width:100%;
    background:#999;
    overflow:hidden;
  }     
</style>
